<!DOCTYPE html>
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<head>
<meta charset="utf-8">
<title>Shifter - Responsive HTML5 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="images/favicon.gif"/>
<link rel="stylesheet" href="css/style.css" media="screen"/><!-- MAIN STYLE CSS FILE -->
<link rel="stylesheet" href="css/responsive.css" media="screen"/><!-- RESPONSIVE CSS FILE -->
<link rel="stylesheet" id="style-color" href="css/colors/blue-color.css" media="screen"/><!-- DEFAULT BLUE COLOR CSS FILE -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700,500' rel='stylesheet' type='text/css'><!-- ROBOTO FONT FROM GOOGLE CSS FILE -->
<link rel="stylesheet" href="css/prettyPhoto.css" media="screen"/><!--PRETTYPHOTO CSS FILE -->
<link rel="stylesheet" href="css/font-awesome/font-awesome.min.css" media="screen"/><!-- FONT AWESOME ICONS CSS FILE -->
<link rel="stylesheet" href="css/layer-slider.css" media="screen"/><!-- LAYER SLIDER CSS FILE -->
<link rel="stylesheet" href="css/flexslider.css" media="screen"/><!-- FLEX SLIDER CSS FILE -->
<link rel="stylesheet" href="css/revolution-slider.css" media="screen"/><!-- REVOLUTION SLIDER CSS FILE -->
<!-- All JavaScript Files (FOR FASTER LOADING OF YOUR SITE, REMOVE ALL JS PLUGINS YOU WILL NOT USE)-->
<script type="text/javascript" src="js/jquery.min.js"></script><!-- JQUERY JS FILE -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><!-- JQUERY UI JS FILE -->
<script type="text/javascript" src="js/flex-slider.min.js"></script><!-- FLEX SLIDER JS FILE -->
<script type="text/javascript" src="js/navigation.min.js"></script><!-- MAIN NAVIGATION JS FILE -->
<script type="text/javascript" src="js/jquery.layerslider.js"></script><!-- LAYER SLIDER JS FILE -->
<script type="text/javascript" src="js/layerslider.transitions.js"></script><!-- LAYER SLIDER TRANSITIONS JS FILE -->
<script type="text/javascript" src="js/map.min.js"></script><!-- GOOGLE MAP JS FILE -->
<script type="text/javascript" src="js/carousel.js"></script><!-- CAROUSEL SLIDER JS -->
<script type="text/javascript" src="js/jquery.theme.plugins.min.js"></script><!-- REVOLUTION SLIDER PLUGINS JS FILE -->
<script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script><!-- REVOLUTION SLIDER JS FILE -->
<script type="text/javascript" src="js/flickr.js"></script><!-- FLICKR WIDGET JS FILE -->
<script type="text/javascript" src="js/instagram.js"></script><!-- INSTAGRAM WIDGET JS FILE -->
<script type="text/javascript" src="js/jquery.twitter.js"></script><!--TWITTER WIDGET JS FILE -->
<script type="text/javascript" src="js/prettyPhoto.min.js"></script><!-- PRETTYPHOTO JS FILE -->
<script type="text/javascript" src="js/jquery.tooltips.min.js"></script><!-- TOOLTIPS JS FILE -->
<script type="text/javascript" src="js/isotope.min.js"></script><!--ISOTOPE JS FILE -->
<script type="text/javascript" src="js/scrolltopcontrol.js"></script><!-- SCROLL TO TOP JS PLUGIN -->
<script type="text/javascript" src="js/jquery.easy-pie-chart.js"></script><!-- EASY PIE JS FILE -->
<script type="text/javascript" src="js/jquery.transit.min.js"></script><!-- TRANSITION JS FILE -->
<script type="text/javascript" src="js/custom.js"></script><!-- CUSTOM JAVASCRIPT JS FILE -->
</head>
<body>
<div id="container">
	<!-- main container starts-->
	<div id="wrapp">
		<!-- main wrapp starts-->
		<header id="header">
		<!--header starts -->
		<div id="header-links">
		</div>
		<div class="container">
			<div class="head-wrapp">
				<a href="index.html" id="logo"><img src="images/logo.jpg" alt=""/></a>
				<!--your logo-->
				<nav class="top-search">
				<!-- search starts-->
				<form action="404-error.html" method="get">
					<button class="search-btn"></button>
					<input class="search-field" type="text" onblur="if(this.value=='')this.value='Search';" onfocus="if(this.value=='Search')this.value='';" value="Search"/>
				</form>
				</nav>
				<!--search ends -->
			</div>
		</div>
		<div id="main-navigation">
			<!--main navigation wrapper starts --> 
			<div class="container">
				<ul class="main-menu">
					<li><a href="index.html" id="current">首页</a>
					<!-- Second Level / Start -->
					<ul>
						 
						<ul>
							<li><a href="#">Dummy Item</a></li>
							<li><a href="#">Dummy Item</a></li>
						</ul>
						</li>
					</ul>
					<!-- Second Level / End -->
					</li>
					<!--<li><a href="#">关于我们</a>-->
					<li><a href="typography.html" id="current">培训项目</a></li>
					<li><a href="typography.html">师资力量</a></li>
					<li><a href="typography.html">合作客户</a></li>
					<li><a href="typography.html">关于我们</a></li>
					<li><a href="typography.html">客服团队</a></li>
					<li><a href="typography.html">研发团队</a></li>
					<li><a href="contact.html">联系我们</a></li>
					<!-- Mega Menu / Start -->
					<!-- Mega Menu / End -->
					</li>
					
					</li>
					
					</li>
					
				</ul>
				<!-- main navigation ends-->
				<div class="after-nav-info">
					<h4>contact phone: +987 654 321 000</h4>
				</div>
			</div>
		</div>
		<!--main navigation wrapper ends -->
		</header>
		<!-- header ends-->
		<div id="content">
			<div id="breadcrumb">
				<!-- breadcrumb starts-->
				<div class="container">
					<div class="one-half">
						<h4>Typography</h4>
					</div>
					<div class="one-half">
						<nav id="breadcrumbs">
						<!--breadcrumb nav starts-->
						<ul>
							<li>You are here:</li>
							<li><a href="index.html">Home</a></li>
							<li>Typography</li>
						</ul>
						</nav>
						<!--breadcrumb nav ends -->
					</div>
				</div>
			</div>
			<!--breadcrumbs ends -->
			<div class="container">
				<section class="one-third">
				<h1>This is H1 heading tag</h1>
				<p>
					 Lorem ipsum dolor sit amet, in fuerat construeret cena reges undis effugere quod ait. Quaestiones patre nihil puella ut diem obiecti prius clamare illi famuli dabit. Ingens amorem civium takimata cum magna anima te sed quod non dum est se in. Horum patre ab adulescentiae discesserunt manu fueris, pertulit sed dominum in deinde plectrum anni ipsa quod ait. Intrat est se ad quia iuvenis.
				</p>
				</section>
				<section class="one-third">
				<h2>This is H2 heading tag</h2>
				<p>
					 Lorem ipsum dolor sit amet, in fuerat construeret cena reges undis effugere quod ait. Quaestiones patre nihil puella ut diem obiecti prius clamare illi famuli dabit. Ingens amorem highlight text cum magnaanima te sed quod non dum est se in. Horum patre ab adulescentiae discesserunt manu fueris, pertulit sed dominum in deinde plectrum anni ipsa quod ait. Intrat est se ad quia iuvenis.
				</p>
				</section>
				<div class="one-third">
					<h3>This is H3 heading tag</h3>
					<p>
						 Lorem ipsum dolor sit amet, in fuerat construeret cena reges undis effugere quod ait. Quaestiones patre nihil puella ut diem obiecti prius clamare illi famuli dabit. Ingens amorem civium highlight text magna anima te sed quod non dum est se in. Horum patre ab adulescentiae discesserunt manu fueris, pertulit sed dominum in deinde plectrum anni ipsa quod ait. Intrat est se ad quia iuvenis.
					</p>
				</div>
				<div class="horizontal-line">
				</div>
				<section class="one-third">
				<h4>This is H4 heading tag</h4>
				<p>
					 Lorem ipsum dolor sit amet, in fuerat construeret cena reges undis effugere quod ait. Quaestiones patre nihil puella ut diem obiecti prius clamare illi famuli dabit. Ingens amorem civium takimata cum magna anima te sed quod nondiscesserunt manu fueris, pertulit sed dominum in deinde plectrum anni ipsa quod ait. Intrat est se ad .
				</p>
				</section>
				<section class="one-third">
				<h5>This is H5 heading tag</h5>
				<p>
					 Lorem ipsum dolor sit amet, in fuerat construeret cena reges undis effugere quod ait. Quaestiones patre nihil puella ut diem obiecti prius clamare illi famuli dabit. Ingens amorem civium takimata cum magna anima te sed quod non dum est se in. Horum patre ab adulescentiae textfueris, pertulit sed dominum in deinde plectrum anni ipsa quod ait. Intrat est se ad.
				</p>
				</section>
				<section class="one-third">
				<h6>This is H6 heading tag</h6>
				<p>
					 Lorem ipsum dolor sit amet, in fuerat construeret cena reges undis effugere quod ait. Quaestiones patre nihil puella ut diem obiecti prius clamare illi famuli dabit. Ingens amorem civium takimata cum magna anima te sed quod non dum est se in. Horum patre ab adulescentiae discesserunt manu fueris, pertulit sed dominum in deinde plectrum anni ipsa quod ait. Intrat est se ad quia iuvenis.
				</p>
				</section>
				<div class="horizontal-line">
				</div>
				<div class="one">
					<p>
						<span class="dropcap gray">B</span>roin id condimentum sem. Morbi vitae dui in magna vestibulum suscipit vitae vel nunc. Integer ut risus nulla. malesuada tortor, nec scelerisque lorem mattis lore Aliquam at erat in purus aliquet mollis. Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc magna nisi.Aliquam at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas. Maecenas ut nulla quis eros scelerisque posuere velatas. Fusce elementum velit vel dolor iaculis egestas nullam vitae neque luctus. Omassa risus eget arcu. Sed ac porta felis. Vivamus dignissim varius augue ut tempor. Proin urna diam ras venenatis, eros id congue pellent esque, risus leo. Proin urna diam ras venenatis, eros id congue pellent esque, risus leo.Donec quam felis, ultricies nec, pellentesque pretium quis, sem. Nulla consequat massa quis enim. Donec pe justo fringilla vel, aliquet nec vulputate eget, arcu enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felisa penelore mollis pretium.
					</p>
					<blockquote>
						 Mauris aliquet ultricies ante, non faucibus ante gravida sed. Sed ultrices pellentesque purus, vulputate volutpat ipsum hendrerit sed neque sed sapien rutrum laoreet justo ultrices. In pellentesque lorem condimentum dui conse. Vivamus semper, mi sed congue semper, odio felis tristique neque, ac venenatis mauris augue adipiscing lectus.
					</blockquote>
					<div class="horizontal-line">
					</div>
				</div>
			</div>
			<section class="footer-call-to-action">
			<section class="container">
			<div class="three-fourth">
				<h4>If you you’re interested in working with Us, feel free to contact Us via contact form.</h4>
			</div>
			<div class="one-fourth">
				<a href="#" class="button grey huge round">Purchase Now</a>
			</div>
			</section>
			</section>
			<footer id="footer">
			<section class="container">
			<section class="one-third">
			<h4>Twitter Feeds</h4>
			<ul class="twitter-feeds">
				<!-- twitter widget starts-->
			</ul>
			<!-- twitter widget ends-->
			<p>
				<a href="#">Follow Me on Twitter</a>
			</p>
			</section>
			<section class="one-third">
			<h4>Latest Posts</h4>
			<ul>
				<!-- latest posts widget starts-->
				<li><a href="blog-post.html">Free Responsive HTML5 Template.</a></li>
				<li><a href="blog-post.html">PSD Widget UI Free Download</a></li>
				<li><a href="blog-post.html">Free Business Bootsrap Template</a></li>
				<li><a href="blog-post.html">Custom WordPress Themes</a></li>
			</ul>
			<!-- lastest posts widget ends-->
			</section>
			<section class="one-third">
			<h4>Flickr Photos</h4>
			<div class="flickr-widget">
				<!-- flickr widget starts-->
			</div>
			</section>
			</section>
			</footer>
			<section id="copyrights">
			<section class="container">
			<div class="one-half">
				<p>
					 Copyright &copy; 2014.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
				</p>
			</div>
			<div class="one-half">
				<ul class="copyright_links">
					<li><a href="#" title="Home">Home</a></li>
					<li><a href="#" title="About">About us</a></li>
					<li><a href="#" title="Blog">Blog</a></li>
					<li><a href="#" title="Contact">Contact</a></li>
				</ul>
			</div>
			</section>
			</section>
		</div>
	</div>
	<!-- main wrapp starts-->
</div>
<!-- main container ends-->

</body>
</html>